<template>
  <CollapsibleSection
    title="预防接种与筛查计划"
    :is-expanded="isExpanded"
    @toggle="$emit('toggle')"
  >
    <view class="space-y-[16rpx]">
      <!-- 接种项目列表 -->
      <view class="border border-blue-200 rounded-[12rpx] p-[16rpx] bg-blue-50">
        <text class="text-[24rpx] font-semibold text-blue-800 block mb-[12rpx]">💉 接种</text>
        
        <ItemListManager
          :items="formData.vaccinationItems || []"
          item-title="接种项目"
          add-button-text="添加接种项目"
          add-button-color="#2196f3"
          @add="addVaccinationItem"
          @remove="removeVaccinationItem"
          @update="updateVaccinationItem"
        >
          <template #default="{ item, index, update }">
            <ItemWithImagesCard
              :model-value="item"
              @update:model-value="(data) => update(index, data)"
              :show-title="true"
              title-label="疫苗名称"
              title-placeholder="请输入疫苗名称"
              description-label="接种详情"
              description-placeholder="请输入接种详情"
              :description-rows="2"
              border-color="border-blue-300"
            />
          </template>
        </ItemListManager>
      </view>

      <!-- 筛查项目列表 -->
      <view class="border border-green-200 rounded-[12rpx] p-[16rpx] bg-green-50">
        <text class="text-[24rpx] font-semibold text-green-800 block mb-[12rpx]">🔍 筛查</text>
        
        <ItemListManager
          :items="formData.screeningItems || []"
          item-title="筛查项目"
          add-button-text="添加筛查项目"
          add-button-color="#4caf50"
          @add="addScreeningItem"
          @remove="removeScreeningItem"
          @update="updateScreeningItem"
        >
          <template #default="{ item, index, update }">
            <ItemWithImagesCard
              :model-value="item"
              @update:model-value="(data) => update(index, data)"
              :show-title="true"
              title-label="筛查类型"
              title-placeholder="请输入筛查类型"
              description-label="筛查详情"
              description-placeholder="请输入筛查详情"
              :description-rows="2"
              border-color="border-green-300"
            />
          </template>
        </ItemListManager>
      </view>
    </view>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import { useItemManagement } from '@/composables/useItemManagement'
import CollapsibleSection from '@/components/CollapsibleSection.vue'
import ItemListManager from '@/components/ItemListManager.vue'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const { 
  formData, 
  addVaccinationItem, 
  removeVaccinationItem, 
  updateVaccinationItem,
  addScreeningItem,
  removeScreeningItem,
  updateScreeningItem
} = useItemManagement()
</script>

<style scoped lang="scss">
// 样式已在模板中定义
</style>
